<template>
  <div class="edit_profile">
    <myheader title='编辑个人信息'>
      <van-icon name="arrow-left" slot="left" @click="$router.back()"/>
      <van-icon name="wap-home-o" slot="right" @click="$router.push({path:'/index'})" />
    </myheader>
    <div class="userImg">
          <img :src="userinfo.head_img" alt="">
          <van-uploader :after-read="afterRead" />
    </div>
    <mycell title="昵称" :desc="userinfo.nickname" @click="nickshow=!nickshow"></mycell>
    <!--  van-dialog的v-model的作用是控制对话框显示和隐藏-->
    <van-dialog v-model="nickshow" title="修改昵称" @confirm='editNickname' @open='handlerOpen' show-cancel-button>
      <!-- van-field的v-model是实现双向绑定 -->
      <van-field v-model="nickname" label="昵称" placeholder="请输入新的昵称" />
    </van-dialog>
    <mycell title="密码" :desc="userinfo.password" type='pass' @click="passshow=!passshow"></mycell>
    <van-dialog v-model="passshow" title="修改密码" @confirm='editPass' :before-close	="beforeClose" show-cancel-button>
      <!-- van-field的v-model是实现双向绑定 -->
      <van-field  label="原密码" placeholder="请输入原始密码" v-model='originPass' />
      <van-field  label="新密码" placeholder="请输入新密码" v-model='newPass' />
    </van-dialog>
    <mycell title="性别" :desc="userinfo.gender==0?'女':'男'" @click="gendershow=!gendershow"></mycell>
    <van-dialog v-model="gendershow" title="修改性别" @confirm='editGender' show-cancel-button>
      <van-picker
        :columns="['女','男']"
        :default-index="userinfo.gender"
        @change="getGender"/>
    </van-dialog>
  </div>
  
</template>

<script>
import mycell from '@/components/mycell.vue'
import myheader from '@/components/myheader.vue'
import axios from '@/utils/myaxios.js'
import {getUserInfo,editUser} from '@/apis/user.js'
import {fileUpload} from '@/apis/fileUpload.js'
export default {
  data () {
    return {
      userinfo:{},
      nickshow:false,
      passshow:false,
      gendershow:false,
      // 下面是编辑操作所单独定义的属性
      nickname:'',    //昵称
      originPass:'',  //原始密码
      newPass:'' ,     //新密码
      newGender:''
    }
  },
  components: {
    myheader,mycell
  },
  methods:{
    // a：当前组件实例    b：当前组件所展示的值   c：索引
    // 注意：索引和后台所需要的0和1对应
    getGender(a,b,c){
      // console.log(a,b,c);
      this.newGender = c
    },
    async editGender(){
       let result = await editUser(this.userinfo.id,{ password: this.newPass })
        if (result.data.message == '修改成功'){
          this.$toast.success('修改成功')
          // 这里的重置是为了页面的展示效果
          this.userinfo.gender = this.newGender
        }
    },
    // 修改密码时阻止弹窗关闭 
    beforeClose(action,done){
      // 只有用户单击了确认，且原始密码输入不正确的时候才需要阻止弹窗的关闭
      if (action == 'confirm' && this.originPass !== this.userinfo.password){
        this.$toast.fail('原始密码输入错误')
        done(false)
      }else{
        done()
      }
    },
    // 修改密码
    async editPass(){
      // 1.判断用户的原始密码是否正确
      if (this.originPass == this.userinfo.password){
      // 2.如果输入正确，则获取用户输入的新密码进行编辑请求
        let result = await editUser(this.userinfo.id,{ password: this.newPass })
        if (result.data.message == '修改成功'){
          this.$toast.success('修改成功')
          // 这里的重置并不是为了页面的展示效果，目的是为了用户在重复修改密码的时候能后正确的进行在原始密码的匹配
          this.userinfo.password = this.newPass
          this.originPass = this.newPass = ''
        }
      }else{
        this.$toast.fail('原始密码输入错误')
      }
    },
    // 打开编辑昵称的对话框
    handlerOpen(){
      this.nickname = this.userinfo.nickname
    },
    // 编辑昵称
    async editNickname(){
      if(this.nickname.trim().length == 0){
        this.$toast.fail('请输入昵称')
        return
      }
      let result = await editUser(this.userinfo.id,{ nickname: this.nickname })
      if (result.data.message == '修改成功'){
        this.$toast.success('修改成功')
        this.userinfo.nickname = this.nickname
      }
    },
    async afterRead(myfile){
      console.log(myfile);
      let formdata = new FormData()
      formdata.append('file',myfile.file)
      let res = await fileUpload(formdata)
      console.log(res);
      this.userinfo.head_img = axios.defaults.baseURL + res.data.data.url
      // 同时还要实现用户头像的编辑
      // 一定要注意这里传递的数据不要拼接基准路径
      let result = await editUser(this.userinfo.id,{ head_img: res.data.data.url })
      console.log(result);
    }
  },
  async mounted () {
    let id = this.$route.params.id
    let res = await getUserInfo(id)
    console.log(res)
  // 这里要注意一个细节，图片不一定有，如果新用户是第一次进入到这个页面，那么图片是 不存在的，如果存在也要注意只有目录+文件名
  // 1.如果没有图片，给赋值默认图片
  // 2.如果有图片也要在前面拼接基准路径
    this.userinfo = res.data.data
    this.nickname = this.userinfo.nickname
    if (this.userinfo.head_img){
      this.userinfo.head_img = axios.defaults.baseURL + this.userinfo.head_img
    }else{
    this.userinfo.head_img = axios.defaults.baseURL + '/uploads/image/default.jpeg'
    }
  }
}

</script>

<style lang="less" scoped>
.edit_profile{
  .userImg{
    width: 100%;
    height: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    > img{
      width: 90 * 100vw/360;
      height: 90 * 100vw/360;
    }
    /deep/ .van-uploader__upload{
      width: 90 * 100vw/360;
      height: 90 * 100vw/360;
    }
    /deep/ .van-uploader{
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%);
      opacity: 0;
    }
  }
}
</style>